<template>
  <div class="province-center-map">
    <div class="map-header">
      <div class="title-section">
        <div class="zuo"></div>
        <span class="titletext">{{ currentProvinceName }}行政区域</span>
        <div class="you"></div>
      </div>
      
      <!-- 省份切换按钮组 -->
      <div class="province-switcher">
        <button 
          v-for="province in quickProvinces" 
          :key="province.code"
          :class="['province-btn', { active: selectedProvinceCode === province.code }]"
          @click="switchProvince(province.code)"
        >
          {{ province.name }}
        </button>
      </div>
    </div>
    
    <div class="map-wrapper">
      <!-- 省级地图组件 -->
      <ProvinceMap
        ref="provinceMapRef"
        :width="mapWidth"
        :height="mapHeight"
        :province-code="selectedProvinceCode"
        :mask-color="maskColor"
        :border-color="borderColor"
        :border-width="borderWidth"
        :show-controls="false"
        :map-style-id="mapStyleId"
        @map-ready="handleMapReady"
        @province-change="handleProvinceChange"
        @boundary-click="handleBoundaryClick"
      />
      
      <!-- 地图控制面板 -->
      <div class="map-controls" v-if="showControls">
        <div class="control-title">地图控制</div>
        
        <div class="control-group">
          <label>掩膜透明度:</label>
          <input 
            type="range" 
            min="0" 
            max="1" 
            step="0.1" 
            v-model="maskOpacity" 
            @input="updateMaskColor"
          />
          <span>{{ Math.round(maskOpacity * 100) }}%</span>
        </div>
        
        <div class="control-group">
          <label>边界宽度:</label>
          <input 
            type="range" 
            min="1" 
            max="6" 
            v-model="borderWidth" 
            @input="updateBorderWidth"
          />
          <span>{{ borderWidth }}px</span>
        </div>
        
        <div class="control-group">
          <label>边界颜色:</label>
          <div class="color-options">
            <div 
              v-for="color in borderColors" 
              :key="color.value"
              :class="['color-option', { active: borderColor === color.value }]"
              :style="{ backgroundColor: color.value }"
              @click="setBorderColor(color.value)"
              :title="color.name"
            ></div>
          </div>
        </div>
        
        <div class="control-actions">
          <button @click="fitToBounds" class="action-btn">适应边界</button>
          <button @click="resetView" class="action-btn">重置视图</button>
        </div>
      </div>
      
      <!-- 图例 -->
      <div class="map-legend">
        <div class="legend-title">图例说明</div>
        <div class="legend-items">
          <div class="legend-item">
            <div class="legend-color" :style="{ backgroundColor: borderColor }"></div>
            <span>省份边界</span>
          </div>
          <div class="legend-item">
            <div class="legend-color mask" :style="{ backgroundColor: maskColor }"></div>
            <span>掩膜区域</span>
          </div>
        </div>
      </div>
      
      <!-- 省份信息面板 -->
      <div class="province-info" v-if="provinceInfo">
        <div class="info-title">{{ provinceInfo.name }}</div>
        <div class="info-content">
          <div class="info-item">
            <span class="label">行政代码:</span>
            <span class="value">{{ provinceInfo.code }}</span>
          </div>
          <div class="info-item">
            <span class="label">中心坐标:</span>
            <span class="value">{{ provinceInfo.center?.join(', ') }}</span>
          </div>
          <div class="info-item">
            <span class="label">缩放级别:</span>
            <span class="value">{{ provinceInfo.zoom }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { ProvinceMap } from '@/components/tencent-map'

// 组件属性
withDefaults(
  defineProps<{
    title?: string
  }>(),
  {
    title: '省级行政区域地图'
  }
)

// 响应式数据
const provinceMapRef = ref<any>(null)
const selectedProvinceCode = ref('370000') // 默认山东省
const maskOpacity = ref(0.6)
const borderWidth = ref(2)
const borderColor = ref('#00d4ff')
const mapStyleId = ref('1')
const showControls = ref(true)
const provinceInfo = ref<any>(null)

// 地图尺寸
const mapWidth = ref(1000)
const mapHeight = ref(600)

// 快速切换省份
const quickProvinces = [
  { code: '110000', name: '北京' },
  { code: '310000', name: '上海' },
  { code: '320000', name: '江苏' },
  { code: '330000', name: '浙江' },
  { code: '370000', name: '山东' },
  { code: '440000', name: '广东' },
  { code: '510000', name: '四川' },
  { code: '530000', name: '云南' }
]

// 边界颜色选项
const borderColors = [
  { name: '蓝色', value: '#00d4ff' },
  { name: '绿色', value: '#52c41a' },
  { name: '橙色', value: '#faad14' },
  { name: '红色', value: '#f5222d' },
  { name: '紫色', value: '#722ed1' },
  { name: '青色', value: '#13c2c2' }
]

// 计算属性
const currentProvinceName = computed(() => {
  const province = quickProvinces.find(p => p.code === selectedProvinceCode.value)
  return province?.name || '未知省份'
})

const maskColor = computed(() => {
  return `rgba(0, 0, 0, ${maskOpacity.value})`
})

// 地图事件处理
const handleMapReady = (mapInstance: any) => {
  console.log('省级地图初始化完成', mapInstance)
  updateProvinceInfo()
}

const handleProvinceChange = (provinceCode: string, provinceName: string) => {
  console.log('省份切换:', provinceName, provinceCode)
  selectedProvinceCode.value = provinceCode
  updateProvinceInfo()
}

const handleBoundaryClick = (boundary: any) => {
  console.log('边界点击:', boundary)
}

// 更新省份信息
const updateProvinceInfo = () => {
  const allProvinces = [
    { code: '110000', name: '北京市', center: [116.4074, 39.9042], zoom: 10 },
    { code: '120000', name: '天津市', center: [117.1901, 39.1084], zoom: 10 },
    { code: '130000', name: '河北省', center: [114.5149, 38.0428], zoom: 7 },
    { code: '140000', name: '山西省', center: [112.5489, 37.8570], zoom: 7 },
    { code: '150000', name: '内蒙古自治区', center: [111.6708, 40.8183], zoom: 6 },
    { code: '210000', name: '辽宁省', center: [123.4291, 41.7971], zoom: 7 },
    { code: '220000', name: '吉林省', center: [125.3245, 43.8868], zoom: 7 },
    { code: '230000', name: '黑龙江省', center: [126.6420, 45.7560], zoom: 6 },
    { code: '310000', name: '上海市', center: [121.4737, 31.2304], zoom: 11 },
    { code: '320000', name: '江苏省', center: [118.7969, 32.0603], zoom: 8 },
    { code: '330000', name: '浙江省', center: [120.1551, 30.2741], zoom: 8 },
    { code: '340000', name: '安徽省', center: [117.2272, 31.8206], zoom: 7 },
    { code: '350000', name: '福建省', center: [119.3063, 26.0745], zoom: 8 },
    { code: '360000', name: '江西省', center: [115.8921, 28.6765], zoom: 7 },
    { code: '370000', name: '山东省', center: [117.0009, 36.6758], zoom: 7 },
    { code: '410000', name: '河南省', center: [113.6401, 34.7566], zoom: 7 },
    { code: '420000', name: '湖北省', center: [114.2986, 30.5928], zoom: 7 },
    { code: '430000', name: '湖南省', center: [112.9836, 28.1943], zoom: 7 },
    { code: '440000', name: '广东省', center: [113.2644, 23.1291], zoom: 7 },
    { code: '450000', name: '广西壮族自治区', center: [108.3201, 22.8240], zoom: 7 },
    { code: '460000', name: '海南省', center: [110.3312, 20.0311], zoom: 8 },
    { code: '500000', name: '重庆市', center: [106.5516, 29.5630], zoom: 9 },
    { code: '510000', name: '四川省', center: [104.0665, 30.5723], zoom: 6 },
    { code: '520000', name: '贵州省', center: [106.7070, 26.5982], zoom: 7 },
    { code: '530000', name: '云南省', center: [102.7123, 25.0406], zoom: 6 },
    { code: '540000', name: '西藏自治区', center: [91.1174, 29.6478], zoom: 5 },
    { code: '610000', name: '陕西省', center: [108.9486, 34.2631], zoom: 7 },
    { code: '620000', name: '甘肃省', center: [103.8236, 36.0581], zoom: 6 },
    { code: '630000', name: '青海省', center: [101.7782, 36.6171], zoom: 6 },
    { code: '640000', name: '宁夏回族自治区', center: [106.2586, 38.4707], zoom: 8 },
    { code: '650000', name: '新疆维吾尔自治区', center: [87.6177, 43.7928], zoom: 5 }
  ]
  
  provinceInfo.value = allProvinces.find(p => p.code === selectedProvinceCode.value)
}

// 控制方法
const switchProvince = (provinceCode: string) => {
  if (provinceMapRef.value) {
    provinceMapRef.value.switchProvince(provinceCode)
  }
}

const updateMaskColor = () => {
  if (provinceMapRef.value) {
    provinceMapRef.value.updateMaskColor(maskColor.value)
  }
}

const updateBorderWidth = () => {
  if (provinceMapRef.value) {
    provinceMapRef.value.updateBorderWidth(Number(borderWidth.value))
  }
}

const setBorderColor = (color: string) => {
  borderColor.value = color
  if (provinceMapRef.value) {
    provinceMapRef.value.updateBorderColor(color)
  }
}

const fitToBounds = () => {
  if (provinceMapRef.value) {
    provinceMapRef.value.fitBounds()
  }
}

const resetView = () => {
  selectedProvinceCode.value = '370000'
  maskOpacity.value = 0.6
  borderWidth.value = 2
  borderColor.value = '#00d4ff'
  
  if (provinceMapRef.value) {
    provinceMapRef.value.switchProvince('370000')
    provinceMapRef.value.updateMaskColor(maskColor.value)
    provinceMapRef.value.updateBorderColor('#00d4ff')
    provinceMapRef.value.updateBorderWidth(2)
  }
}

// 响应式调整地图尺寸
const handleResize = () => {
  const container = document.querySelector('.map-wrapper')
  if (container) {
    const rect = container.getBoundingClientRect()
    mapWidth.value = Math.max(800, rect.width - 40)
    mapHeight.value = Math.max(500, rect.height - 40)
  }
}

// 生命周期
onMounted(() => {
  handleResize()
  window.addEventListener('resize', handleResize)
  updateProvinceInfo()
})

onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
})
</script>

<style scoped lang="less">
.province-center-map {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #0a1929;
  
  .map-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid rgba(0, 212, 255, 0.3);
    
    .title-section {
      display: flex;
      align-items: center;
      
      .titletext {
        font-size: 24px;
        font-weight: 900;
        letter-spacing: 4px;
        background: linear-gradient(
          92deg,
          #0072ff 0%,
          #00eaff 48.8525390625%,
          #01aaff 100%
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        margin: 0 10px;
      }
      
      .zuo,
      .you {
        background-size: 100% 100%;
        width: 29px;
        height: 20px;
      }
      
      .zuo {
        background: url('@/assets/img/xiezuo.png') no-repeat;
      }
      
      .you {
        background: url('@/assets/img/xieyou.png') no-repeat;
      }
    }
    
    .province-switcher {
      display: flex;
      gap: 8px;
      
      .province-btn {
        padding: 8px 16px;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid #00d4ff;
        border-radius: 4px;
        color: #fff;
        cursor: pointer;
        transition: all 0.3s;
        font-size: 14px;
        
        &:hover {
          background: rgba(0, 212, 255, 0.2);
        }
        
        &.active {
          background: #00d4ff;
          color: #000;
        }
      }
    }
  }
  
  .map-wrapper {
    flex: 1;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    
    .map-controls {
      position: absolute;
      top: 20px;
      right: 20px;
      background: rgba(0, 0, 0, 0.8);
      border: 1px solid #00d4ff;
      border-radius: 8px;
      padding: 16px;
      min-width: 200px;
      z-index: 1000;
      
      .control-title {
        font-size: 16px;
        font-weight: bold;
        color: #00d4ff;
        text-align: center;
        margin-bottom: 16px;
      }
      
      .control-group {
        margin-bottom: 16px;
        
        label {
          display: block;
          font-size: 12px;
          color: #ccc;
          margin-bottom: 8px;
        }
        
        input[type="range"] {
          width: 100%;
          margin-bottom: 4px;
        }
        
        span {
          font-size: 12px;
          color: #00d4ff;
        }
        
        .color-options {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 4px;
          
          .color-option {
            width: 24px;
            height: 24px;
            border-radius: 4px;
            cursor: pointer;
            border: 2px solid transparent;
            transition: all 0.3s;
            
            &:hover {
              transform: scale(1.1);
            }
            
            &.active {
              border-color: #fff;
            }
          }
        }
      }
      
      .control-actions {
        display: flex;
        flex-direction: column;
        gap: 8px;
        
        .action-btn {
          padding: 8px 12px;
          background: rgba(0, 212, 255, 0.2);
          border: 1px solid #00d4ff;
          border-radius: 4px;
          color: #00d4ff;
          cursor: pointer;
          transition: all 0.3s;
          font-size: 12px;
          
          &:hover {
            background: #00d4ff;
            color: #000;
          }
        }
      }
    }
    
    .map-legend {
      position: absolute;
      bottom: 20px;
      left: 20px;
      background: rgba(0, 0, 0, 0.8);
      border: 1px solid #00d4ff;
      border-radius: 8px;
      padding: 16px;
      z-index: 1000;
      
      .legend-title {
        font-size: 14px;
        font-weight: bold;
        color: #00d4ff;
        margin-bottom: 12px;
      }
      
      .legend-items {
        display: flex;
        flex-direction: column;
        gap: 8px;
        
        .legend-item {
          display: flex;
          align-items: center;
          gap: 8px;
          font-size: 12px;
          color: #ccc;
          
          .legend-color {
            width: 16px;
            height: 16px;
            border-radius: 2px;
            
            &.mask {
              border: 1px solid #666;
            }
          }
        }
      }
    }
    
    .province-info {
      position: absolute;
      top: 20px;
      left: 20px;
      background: rgba(0, 0, 0, 0.8);
      border: 1px solid #00d4ff;
      border-radius: 8px;
      padding: 16px;
      min-width: 200px;
      z-index: 1000;
      
      .info-title {
        font-size: 16px;
        font-weight: bold;
        color: #00d4ff;
        text-align: center;
        margin-bottom: 12px;
        padding-bottom: 8px;
        border-bottom: 1px solid rgba(0, 212, 255, 0.3);
      }
      
      .info-content {
        .info-item {
          display: flex;
          justify-content: space-between;
          margin-bottom: 8px;
          font-size: 12px;
          
          .label {
            color: #ccc;
          }
          
          .value {
            color: #00d4ff;
            font-weight: bold;
          }
        }
      }
    }
  }
}
</style>